<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_自定义JS对象</title>
</head>
<body>
<table border="1px">
    <caption>商品表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    //定义一个数组，模拟从服务器请求回来的多个商品对象
    let productArr = [
        {title: '小米14', price: 8000, num: 200},
        {title: '华为Mate60', price: 5000, num: 100},
        {title: '苹果16', price: 10000, num: 700},
        {title: '魅族', price: 2000, num: 500}
    ];
    /* 数组中有几条数据，表格就有几行 */
    let table = document.querySelector('table');
    for (let i = 0; i < productArr.length; i++) {
        //循环几次,就生成几个tr与3倍的td
        let tr = document.createElement('tr');
        let titleTd = document.createElement('td');
        let priceTd = document.createElement('td');
        let numTd = document.createElement('td');
        //遍历到的当前商品对象的属性值需要装入对应的td中
        titleTd.innerHTML = productArr[i].title;
        priceTd.innerHTML = productArr[i].price;
        numTd.innerHTML = productArr[i].num;
        tr.append(titleTd, priceTd, numTd);
        table.append(tr);
    }
</script>
</body>
</html>